<template>
	<view class="container">
		<view class="container-form">
			<u-form :model="bankDto" ref="uForm" :rules="rules">
				<view class="u-inp">
					<u-form-item label="姓名" prop="realname" label-width="130">
						<view class="container-form-cell-inp">
							<u-input v-model="bankDto.realname" :border="false" placeholder="请输入姓名" fontSize="24" clearable />
						</view>
					</u-form-item>
				</view>
				<!-- <view class="container-form-line"></view> -->
				
				<view class="u-inp">
					<u-form-item label="手机号码" prop="mobile" label-width="130">
						<u-input v-model="bankDto.mobile" :border="false" placeholder="请输入手机号码" fontSize="24" maxlength="11"
							clearable />
					</u-form-item>
				</view>
				<!-- <view class="container-form-line"></view> -->
			    
				<view class="u-inp">
					<u-form-item label="选择银行" prop="intro" label-width="130">
						<view @click="showBank = true" class="pickerTextStyle">{{ bankDto.branch_bank_name || '请选择银行卡号'}}</view>
					</u-form-item>
				</view>
				
				<!-- <view class="container-form-line"></view> -->
				<view class="u-inp">
				  <u-form-item label="提现账号" prop="bank_account" label-width="130">
				  	<u-input v-model="bankDto.bank_account" :border="false" placeholder="请输入提现账号" fontSize="24"
				  		maxlength="19" clearable />
				  </u-form-item>
				</view>
			</u-form>
		</view>
		<u-picker :show="showBank" :columns="columns" @cancel="showBank = false" closeOnClickOverlay
			@confirm="handleChange" @close="showBank = false"></u-picker>
		<view class="btnStyle" @click="submit">
			添加银行卡
		</view>
		
		<u-modal :show="showModel" title="温馨提示" @confirm="confirmBank">
			<template>
				<view style="font-size: 26rpx;">
					是否确定添加银行卡?
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	import request from "@/api/request.js"
	export default {
		data() {
			return {
				columns: [
					["中国工商银行", "中国农业银行", "中国银行", "中国建设银行", "交通银行", "中国邮政储蓄银行", "招商银行", "上海浦东发展银行", "中信银行",
						"中国民生银行",
						"光大银行",
						"平安银行",
						"兴业银行",
						"广发银行",
						"华夏银行",
						"渤海银行",
						"浙商银行",
						"恒丰银行",
						"北京银行",
						"上海银行",
						"江苏银行",
						"南京银行",
						"宁波银行",
						"徽商银行",
						"杭州银行",
						"盛京银行",
						"锦州银行",
						"哈尔滨银行",
						"广州银行",
						"重庆银行",
						"成都银行",
						"天津银行",
						"中国农业发展银行",
						"国家开发银行",
						"中国进出口银行"
					]
				],
				showBank: false,
				showModel:false,
				form: {},
				rules: {
					realname: [{
						required: true,
						message: '此为必填字段',
						trigger: ['blur', 'change'],
					}],
					mobile: [{
					  required: true,
					  message: '此为必填字段',
					 trigger: ['blur', 'change'],	
					}],
					bank_account: [
					{
					  required: true,
					  message: '此为必填字段',
					 trigger: ['blur', 'change'],	
					}
					],
					branch_bank_name: [
					 {
					   required: true,
					   message: '此为必填字段',
					  trigger: ['blur', 'change'],	
					 }	
					]
				},
				bankDto: {
					branch_bank_name: '',
					realname: '',
					mobile: '',
					bank_account: ''
				}
			}
		},
		components: {

		},
		onLoad() {
		  this.bankDto.token = uni.getStorageSync('token')
		},
		methods: {
			handleChange(item) {
				this.bankDto.branch_bank_name = item.value[0]
				this.showBank = false
			},
			submit() {	
				this.$refs.uForm.validate().then(res => {
					this.showModel = true
				}).catch(errors => {
					uni.$u.toast('添加失败')
				})
			},
			confirmBank(){
			 this.showModel = false
			 request({
			 	url: '/kx/withdrawal/addBankNo',
			 	method: 'POST',
			 	data: this.bankDto,
			 	successCb(res){
					uni.showLoading({
						title: "添加成功!"
					})
					setTimeout(() => {
						uni.navigateBack()
						uni.hideLoading()
					},500)
			 	}
			 })	
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: #f6f6f6;
		width: 100%;
		height: 100vh;
		&-form {
			margin: 0 auto;
			margin-top: 50rpx;
			background: $uni-bg-color;
			border-radius: 15rpx;
			padding: 0 24rpx;
            padding-bottom: 24rpx;
			&-cell {

			}

			&-line {
				border-bottom: 2rpx solid #e4e4e4;
			}
		}
	}

	.inpStyle {
		font-size: 26rpx;
	}

	.btnStyle {
		width: 680rpx;
		height: 88rpx;
		margin: 24rpx auto;
		background: #FF8732;
		text-align: center;
		line-height: 88rpx;
		color: $uni-bg-color;
		border-radius: 45rpx;
	}

	.pickerTextStyle {
		padding: 6rpx 0 6rpx 18rpx;
		font-size: 24rpx;
	}
	.u-inp {
	  background: #F3F3F3;
	  padding: 0 30rpx;
	  border-radius: 50rpx;
	  margin-bottom: 20rpx;
	}
</style>